<script setup lang="ts">
import { useMergeLogList } from "@fl/api/elevator-api";
import { SearchTable } from "@fl/components";
import { cloneDeep } from "lodash-es";
import type { VxeGridProps, VxePagerEvents } from "vxe-table";
import MergeRecordDetail from "./merge-record-detail.vue";
const visible = defineModel<boolean>("visible", { required: true });
const records = ref<any>();
const gridOptions = reactive<VxeGridProps>({
    columns: [
        { title: "序号", type: "seq", width: 60 },
        { field: "createBy", title: "操作人" },
        { field: "createTime", title: "操作时间" },
        {
            field: "mainApplyNo",
            slots: { default: "mainApplyNo" },
            title: "合并记录编号",
            width: 250,
        },
        { field: "mergeNum", slots: { default: "mergeNum" }, title: "被合并记录" },
        { field: "projectName", title: "小区名称" },
        { field: "building", title: "合并后楼栋" },
        { field: "unit", title: "合并后单元" },
    ],
});
const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    tablePage.currentPage = currentPage;
    tablePage.pageSize = pageSize;
};
const tablePage = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0,
});

const params = computed(() => ({
    pageIndex: tablePage.currentPage,
    pageSize: tablePage.pageSize,
    orderBy: "create_time", // 根据创建时间排序
    orderType: "desc", // 降序
}));
const { data, isLoading } = useMergeLogList(params);
watchEffect(() => {
    if (data.value) {
        records.value = cloneDeep(data.value.records);
        tablePage.total = data.value.total!;
    }
});
function closed() {
    visible.value = false;
    records.value = [];
}
const detailVisible = ref(false);
const detailId = ref();
const isMain = ref(false);
function showDetail(row: any,ismain:boolean) {
    detailId.value =!ismain? row.id:row.mainId;
    isMain.value = ismain;
    detailVisible.value = true;

}
</script>
<template>
    <el-drawer v-model="visible" :size="'70%'" @closed="closed" direction="rtl">
        <template #header>
            <div class="bg-[#F2F3F5] text-[20px] font-semibold">合并记录</div>
        </template>
        <template #default>
            <SearchTable
                ref="tableRef"
                v-bind="gridOptions"
                v-model:pager="tablePage"
                :loading="isLoading"
                :data="records"
                @page-change="handlePageChange"
            >
                <template #mainApplyNo="{ row }">
                    <span
                        class="color-[#409eff] cursor-pointer"
                        @click="showDetail(row,true)"
                        >{{ row.mainApplyNo }}</span
                    >
                </template>
                <template #mergeNum="{ row }">
                    <span
                        class="color-[#409eff] cursor-pointer"
                        @click="showDetail(row,false)"
                    >
                        {{ row.mergeNum }}
                    </span>
                </template>
            </SearchTable>
        </template>
    </el-drawer>
    <MergeRecordDetail
        ref="detailRef"
        v-if="detailVisible"
        v-model:visible="detailVisible"
        v-model:id="detailId"
        v-model:isMain="isMain"
    />
</template>
